// FileName: GView.ts
// ProjectName: miu-club
// 作者：区区电脑
// createTime: 2019/9/16
import '../style/GView.less';
import {
    GBorderType,
    GColor,
    GFlex,
    GFlexAlignItems,
    GFlexJustifyContent,
    GOverflow,
    GPosition,
    GValueType
} from "./GEnum";

export enum GClassName {
    isCanTap = 'isCanTap',
    isNotSelect = 'isNotSelect',
}

class GView {
    protected view!: any;
    public id?:string;
    public text?:string;
    public width?:number;
    public height?:number;
    public margin?:string;
    public padding?:string;
    public color?: GColor | string;
    public backgroundColor?: GColor | string;
    public fontSize?: number = 14;
    public fontWeight?: number;
    public flex?:number;
    public justifyContent?:GFlexJustifyContent = GFlexJustifyContent.start;
    public alignItems?:GFlexAlignItems = GFlexAlignItems.start;
    public flexType?: GFlex = GFlex.row;
    public border?:string;
    public borderRadius?:number;
    public boxShadow?:string;
    public overFlow?:GOverflow = GOverflow.auto;
    public position?:GPosition = GPosition.relative;
    public zIndex?:number;
    public left?:number;
    public right?:number;
    public top?:number;
    public bottom?:number;
    public valueType?:GValueType = GValueType.px;
    public onClick?: Function;
    public opacity?: number;
    protected transition?:number;
    public transform?:string;
    public isCanTap?:boolean = true;
    public isCanSelect?:boolean = true;

    public marinInit(top:number, right:number, bottom:number, left:number): string {
        if (!this.valueType) {
            this.valueType = GValueType.px;
            // eslint-disable-next-line no-console
            console.warn('valueType 必须在所有 number 类型的属性之前设置，默认为 px');
        }
        return '' + top + this.valueType + right + this.valueType + bottom + this.valueType + left + this.valueType;
    }
    public paddingInit(top:number, right:number, bottom:number, left:number): string {
        if (!this.valueType) {
            this.valueType = GValueType.px;
            // eslint-disable-next-line no-console
            console.warn('valueType 必须在所有 number 类型的属性之前设置，默认为 px');
        }
        return '' + top + this.valueType + right + this.valueType + bottom + this.valueType + left + this.valueType;
    }
    public borderInit(width:number, type:GBorderType, color:GColor|string): string {
        if (!this.valueType) {
            this.valueType = GValueType.px;
            // eslint-disable-next-line no-console
            console.warn('valueType 必须在所有 number 类型的属性之前设置，默认为 px');
        }
        return '' + width + this.valueType + type + color;
    }

    /**
     * view 图层
     */
    public get layer(): any {
        if (!this.view) {
            this.view = document.createElement('div');
        }
        this.setting();
        return this.view;
    }

    /**
     * 统一设置
     */
    protected setting(): void {
        this.setAttr();
        this.setStyle();
    }

    /**
     * 设置属性
     */
    protected setAttr(): void {
        let __this = this;
        if (this.text) {
            this.view.innerText = this.text;
        }
        if (this.id) {
            this.view.id = this.id;
        }
        if (!this.isCanSelect) {
            this.view.classList.add(GClassName.isNotSelect);
        }
        if (this.isCanTap && this.onClick) {
            this.view.classList.add(GClassName.isCanTap);
        }
        this.view.onclick = () => {
            if (__this.onClick && __this.isCanTap) {
                __this.onClick(__this);
            }
        };
    }

    /**
     * 设置样式
     */
    protected setStyle(): void {
        this.view.style.display = 'inline-flex';
        if (!this.valueType) {
            this.valueType = GValueType.px;
            // eslint-disable-next-line no-console
            console.warn('valueType 必须在所有 number 类型的属性之前设置，默认为 px');
        }
        if (this.width || this.width === 0) {
            this.view.style.width = this.width + this.valueType;
        }
        if (this.height || this.height === 0) {
            this.view.style.height = this.height + this.valueType;
        }
        if (this.margin) {
            this.view.style.margin = this.margin;
        }
        if (this.padding) {
            this.view.style.padding = this.padding;
        }
        if (this.color) {
            this.view.style.color = this.color;
        }
        if (this.backgroundColor) {
            this.view.style.backgroundColor = this.backgroundColor;
        }
        if (this.fontSize) {
            this.view.style.fontSize = this.fontSize + this.valueType;
        }
        if (this.fontWeight) {
            this.view.style.fontWeight = this.fontWeight;
        }
        if (this.flex) {
            this.view.style.flex = this.flex;
        }
        if (this.justifyContent) {
            this.view.style.justifyContent = this.justifyContent;
        }
        if (this.alignItems) {
            this.view.style.alignItems = this.alignItems;
        }
        if (this.flexType) {
            this.view.style.flexDirection = this.flexType;
        }
        if (this.border) {
            this.view.style.border = this.border;
        }
        if (this.boxShadow) {
            this.view.style.boxShadow = this.boxShadow;
        }
        if (this.borderRadius || this.borderRadius === 0) {
            this.view.style.borderRadius = this.borderRadius + this.valueType;
        }
        if (this.overFlow) {
            this.view.style.overflow = this.overFlow;
        }
        if (this.position) {
            this.view.style.position = this.position;
        }
        if (this.zIndex || this.zIndex === 0) {
            this.view.style.zIndex = this.zIndex;
        }
        if (this.left || this.left === 0) {
            this.view.style.left = this.left + this.valueType;
        }
        if (this.right || this.left === 0) {
            this.view.style.right = this.right + this.valueType;
        }
        if (this.top || this.top === 0) {
            this.view.style.top = this.top + this.valueType;
        }
        if (this.bottom || this.bottom === 0) {
            this.view.style.bottom = this.bottom + this.valueType;
        }
        if (this.opacity || this.opacity === 0) {
            if (this.opacity <=  0) {
                this.opacity = 0;
            }
            if (this.opacity >= 1) {
                this.opacity = 1;
            }
            this.view.style.opacity = this.opacity;
        }
        if (this.transform) {
            this.view.style.transform = this.transform;
        }
        if (this.transition || this.transition === 0) {
            this.view.style.transition = 'all ' + this.transition + 's ease';
        }
    }

    /**
     * 视图动画
     * @param transition 动画执行时间 单位：秒
     * @param animate 动画执行内容 callback(GView)
     * @param end 动画执行结束 callback(GView)
     */
    public animation(transition: number, animate:Function, end?:Function): void {
        let __this = this;
        this.transition = transition;
        if (!animate) {
            // eslint-disable-next-line no-console
            console.error('animate is undefined');
            return;
        }
        setTimeout(() => {
            animate(this);
            __this.reset();
        }, 1);
        setTimeout(() => {
            if (end) {
                end(__this);
            }
        }, transition * 1000 + 1);
    }

    /**
     * 重新进行统一设置
     */
    public reset(): void {
        this.setting();
    }

    /**
     * 添加到页面
     */
    public addToWindow(): void {
        window.document.body.appendChild(this.layer);
    }

    /**
     * 添加子视图
     * @param subView
     */
    public addChild(subView: GView): void {
        this.layer.appendChild(subView.layer);
    }

    /**
     * 移除
     */
    public delete(): void {
        this.view.remove();
    }
}

export default GView;
